<!-- src/components/MenuItem.vue -->
<template>
  <el-sub-menu v-if="item.children && item.children.length" :index="item.index" router :default-active="router().currentRoute.value.path">
    <template #title>
      <el-icon>
        <component :is="item.icon" />
      </el-icon>
      <span v-show="!isCollapse">{{ item.title }}</span>
    </template>
    <menu-item
        v-for="child in item.children"
        :key="child.index"
        :item="child"
        :is-collapse="isCollapse"
    />
  </el-sub-menu>

  <el-menu-item v-else :index="item.index" :route="item.index">
    <el-icon>
      <component :is="item.icon" />
    </el-icon>
    <span v-show="!isCollapse">{{ item.title }}</span>
  </el-menu-item>
</template>

<script>
import router from "@/router/index.js";

export default {
  name: 'MenuItem',
  methods: {
    router() {
      return router
    }
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    isCollapse: {
      type: Boolean,
      default: false
    }
  }
}
</script>
